/**
 * Created by win7 on 2017/3/14.
 */

import React from "react";
import './css/Table.css';
import {Checkbox} from 'antd';
import Confirm from "../../common/Confirm";
import Edituserinfo from './Edituserinfo';
import ForbidUser from './ForbidUser'
import UseUser from './UseUser'
import MuchForbidUser from './MuchForbidUser'
import MuchUseUser from './MuchUseUser'
import UserDetail from './UserDetail'
/*用户table组件*/

export default class Table extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            selectAll:false,
            select:false,
            userContext:[]
        }
    }
    //单选事件
    editUser(){
        this.refs.edituserinfo.setState({
            visible:true
        })
    }
    muchForbid(){
        this.refs.muchforbiduser.setState({
            visible:true
        })
    }
    muchUse(){
        this.refs.muchuseuser.setState({
            visible:true
        })
    }
    onmodal(context,indexnumber){
        this.refs.edituserinfo.setState({
            visible:true
        })

    }
    render(){
        return (
            <div className="user_content">
                <ul>
                    <li className="userManage_li" style={{backgroundColor:'#f2f2f2'}}>
                        <div className="userManage_all userManage_title1" >
                            <Checkbox><span className="bodrer1">全选</span></Checkbox>
                        </div>
                        <span  className="userManage_title2">用户id</span>
                        <span  className="userManage_title3">会员名称</span>
                        <span  className="userManage_title4">所属公司</span>
                        <span  className="userManage_title5">手机号</span>
                        <span  className="userManage_title6">状态</span>
                        <div className="userManage_all userManage_title8">
                            <span  className="">操作</span>
                        </div>
                    </li>
                    {
                        this.state.userContext.map((ele,index)=>{
                            return <UserDetail
                                key={index}
                                context={ele}
                                onmodal={this.onmodal.bind(this)}
                                onedit={this.editUser.bind(this)}
                                ref={index+'user'}
                                indexnumber={index}>
                            </UserDetail>
                        })
                    }
                </ul>
                <div className="comManage_muchForbid">
                    <Confirm tcontext={'+批量禁用'} touch={this.muchForbid.bind(this)}></Confirm>
                    <Confirm tcontext={'+批量启用'} style={{marginLeft:'20px'}} touch={this.muchUse.bind(this)}></Confirm>
                </div>
                {/*页码*/}
                <ol className="page_coder">
                    <li>总计:<span>2</span>条</li>
                    <li>每页<input type="text"/>条</li>
                    <li>第&nbsp;&nbsp;<input type="text" className="page_input"/>&nbsp;&nbsp;页</li>
                    <li>共<span>10</span>页</li>
                    <li className="page_button_two"><i className="page_button page_left"></i><i className="page_button page_right"></i></li>
                </ol>
                <ForbidUser ref={'forbiduser'}></ForbidUser>
                <UseUser ref={'useUser'}></UseUser>
                <MuchForbidUser ref={'muchforbiduser'}></MuchForbidUser>
                <MuchUseUser ref={'muchuseuser'}></MuchUseUser>
                <Edituserinfo ref={'edituserinfo'}></Edituserinfo>
            </div>
        )
    }
}
